<template>
	<div class="miao-con">
		<h3>京东秒杀</h3>
		<p>{{_hour}}点</p>
		<div>
			<van-count-down :time="time">
				<template #default="timeData">
					<span class="block">{{ timeData.hours }}</span>
					<span class="colon">:</span>
					<span class="block">{{ timeData.minutes }}</span>
					<span class="colon">:</span>
					<span class="block">{{ timeData.seconds }}</span>
				</template>
			</van-count-down>
		</div>
		
	</div>
	<ul class="seckill">
        <li v-for="item in seckilllistarr" :key="item.id">
            <img :src="item.img1" alt="">
            <p>${{ item.originprice }}</p>
        </li>
    </ul>
</template>

<script setup lang='ts'>
import { MiaoS } from '@/api/loginapi'

import { ref,computed,onMounted } from 'vue';

// const mydate = ref(new Date('2022.12.26').getTime())
// console.log(mydate.value);

// const date = ref(new Date().getTime())
// console.log(date.value);

// const result = computed(() => mydate.value - date.value)
// console.log(result.value);

// const time = ref(result)
const seckilllistarr = ref()


onMounted(() => {
	MiaoS({count:1}).then((res) => {
		console.log(res.data);
		seckilllistarr.value=res.data
	})
})





// 使用计算属性处理时间格式两位数
const formatTime = computed(() => (num: number) => {
    return num < 10 ? '0' + num : num
})
// 定义函数,该函数返回当前的专场时间以及 专场的倒计时时间
const getRemaintime = () => {
    const _hour = ref(0)
    const time = ref(0)

    const date = new Date()
    let hour = date.getHours()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
    if (hour % 2 === 0) {
        hour += 2
    } else {
        hour += 1
    }
    // 用于显示几点场
    _hour.value = hour - 2
    if (hour === 24) {
        hour = 0
        day += 1
        // 你要是不知道13578十腊，我看你这个ios兼容怎么写
        if (
            (day === 31 && [1, 3, 5, 7, 8, 10, 11].indexOf(month) === -1) ||
            (day === 32 && [1, 3, 5, 7, 8, 10, 11].indexOf(month) !== -1)
        ) {
            day = 1
            month += 1
            if (month === 13) {
                month = 1
                year += 1
            }
        }
    }
    // 计算剩余时间的数字
    time.value = new Date(`${year}/${month}/${day} ${hour}:00:00`).getTime() - date.getTime()
    return {
        _hour,
        time
    }

}
// 解构出时间
const { time, _hour } = getRemaintime();







</script>

<style lang="scss" scoped>
.miao-con {
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	h3 {
		line-height: 40px;
	}
	p{
		color: #ee0a24;
	}
	div {
		.colon {
			display: inline-block;
			margin: 0 4px;
			color: #ee0a24;
		}

		.block {
			display: inline-block;
			border-radius: 8px;
			width: 46px;
			height: 28px;
			line-height: 28px;
			color: #fff;
			font-size: 20px;
			text-align: center;
			background-color: #ee0a24;
		}
	}
}
.seckill{
	width: 100%;
	display: flex;
	justify-content: space-around;
	li{
		width: 59px;
		img{
			width: 100%;
			height: 100px;
		}
		p{
			text-align: center;
			color: #ee0a24;
		}
	}
}
</style>